<template>
  <md-nav-bar title="壁纸库" />
  <view
    class="container"
    :style="{
      width: '100%',
      height: `calc(100vh - 44px - ${data.statusBarHeight})`,
    }">
    <view class="wrapper" />
    <image v-if="data.url" class="content" :key="data.url" :src="data.url" mode="aspectFill" @load="handleImageLoad" @error="handleImageError"></image>
    <view class="btns">
      <!-- 预览 -->
      <!-- <image
        src="https://jogging.qzctdg.com/uploads/ads/20251111/c2eaf7f193640641dc963192f88a1ff9.png"
        @click="preview" /> -->
      <!-- 下载原图 -->
      <image
        src="https://jogging.qzctdg.com/uploads/ads/20251111/29c602915342eb81518f8e6894922c6c.png"
        @click="download" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, nextTick } from 'vue';
// 组件
import { onLoad } from '@dcloudio/uni-app';
import { poster } from '@/api';
import { downLoadImage } from '@/utils/util';
const data = reactive<any>({
  statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
  url: '',
});

const preview = () => {
  uni.previewImage({
    current: data.url,
    urls: [data.url],
  });
};

const download = () => {
  if (!data.url) {
    uni.showToast({
      title: '图片未加载完成',
      icon: 'none',
    });
    return;
  }
  // #ifdef MP-WEIXIN
  uni.downloadFile({
    url: data.url,
    success: res => {
      if (res.statusCode === 200) {
        uni.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: () => {
            uni.showToast({
              title: '保存成功',
              icon: 'success',
            });
          },
          fail: () => {
            uni.showToast({
              title: '保存失败',
              icon: 'error',
            });
          },
        });
      }
    },
    fail: () => {
      uni.showToast({
        title: '下载失败',
        icon: 'error',
      });
    },
  });
  // #endif

  // #ifdef WEB
  downLoadImage(data.url);
  // #endif
};

// 图片加载成功
const handleImageLoad = () => {
  // 图片加载成功后的处理
};

// 图片加载失败
const handleImageError = () => {
  uni.showToast({
    title: '图片加载失败',
    icon: 'none',
  });
};

/**
 * 获取壁纸
 */
const getPoster = async (poster_id: string) => {
  try {
    const res = await poster({
      poster_id,
    });
    // 在H5环境下，使用nextTick确保DOM更新后再设置图片URL
    // #ifdef H5
    await nextTick();
    // #endif
    data.url = res.data;
    // #ifdef H5
    // 在H5环境下，再次使用nextTick确保图片元素已渲染
    await nextTick();
    // #endif
  } catch (error) {
    uni.showToast({
      title: '获取壁纸失败',
      icon: 'none',
    });
  }
};

onLoad(options => {
  options?.poster_id && getPoster(options.poster_id);
  const configInfo = uni.getStorageSync('configInfo') ? JSON.parse(uni.getStorageSync('configInfo')) : '';
  if (configInfo) {
    data.configInfo = configInfo;
  }
});
</script>
<style lang="scss" scoped>
.container {
  //background: url('https://jogging.qzctdg.com/uploads/ads/20251111/aa38a5464d7dc0d7713c935e291131ac.png') center/cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .wrapper {
    position: absolute;
    height: 1378rpx;
    width: 100%;
    // background: url('https://jogging.qzctdg.com/uploads/ads/20251112/09cf08b1406cef62e5739c1bb66e8e75.png') center/cover no-repeat;
    z-index: 1;
  }
  .content {
    width: 100%;
    height: 100%;
    // top: 192rpx;
    // left: 70rpx;
    background: white;
    // position: absolute;
    z-index: 0;
  }
  .btns {
    position: absolute;
    top: 1315rpx;
    width: 750rpx;
    height: 131rpx;
    z-index: 2;
    display: flex;
    justify-content: center;
    image {
      width: 354rpx;
      height: 131rpx;
    }
  }
}
</style>
